<template>
	<!-- 学生考试列表 -->
	<page-body>
		<view class="page">
			<view class="flex benben-position-layout flex flex-wrap align-center mance_flex_0"
				:style="{height:(178+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex flex-wrap align-center justify-between flex-sub mance_fd0_0'>
					<view class='flex flex-wrap align-center mance_fd0_0_c0'>
						<text class='fu-iconfont2  mance_fd0_0_c0_c0' @tap.stop="handleJumpDiy" data-type="back"
							data-url="1">&#xE794;</text>
					</view>
					<view class='flex flex-wrap align-stretch justify-center'>
						<text class='mance_fd0_0_c1_c0'>我的考试</text>
					</view>
					<view class='flex flex-wrap align-center justify-end mance_fd0_0_c0'>
					</view>
				</view>

				<!-- tab切换 -->
				<view class="tab-outer">
					<view @click="tabChange(1)" :class="type == 1 ? 'tab-ite-active' : ''" class="tab-ite ">
						未完成
					</view>
					<view @click="tabChange(3)" :class="type == 3 ? 'tab-ite-active' : ''" class="tab-ite">
						已完成
					</view> 
					<view @click="tabChange(2)" :class="type == 2 ? 'tab-ite-active' : ''" class="tab-ite">
						超时未完成
					</view>
				</view>
			</view>

			<view :style="{height: (178+StatusBarRpx)+'rpx'}"></view>

			<view class="overview">
				<view v-for="item in  list" :key="item.exampaper_id" v-if="list.length>0 && isup">
					<!-- 未完成 -->
					<view class="overview-ite" @tap.stop="handleJumpDiy" data-type="navigateTo"
						:data-url="`/pages/exam/examDetail/examDetail?exampaper_id=${item.exampaper_id}&papercourse_id=${item.aid}&name=${item.title}`"
						v-if="type == 1">
						<view class="ite-tit">
							{{item.title}}
						</view>
						<view class="ite-content">
							<view class="course">
								所属课程：<span>{{item.course_name}}</span>
							</view>
							<view class="course" style="margin:36rpx 0;">
								开始时间：<span>{{item.ds_start_time}}</span>
							</view>
							<view class="course">
								截止时间：<span>{{item.ds_end_time}}</span>
							</view>
						</view>
						<view class="start">
							<image style="width: 34rpx;height: 34rpx;margin-right: 12rpx;" src="/static/img02/start.png"
								mode=""></image>开始考试
						</view>
					</view>

					<!-- 超时未完成 -->
					<view class="overview-ite" @tap.stop="chaoShi" v-if="type == 2">
						<view class="ite-tit">
							{{item.title}}
						</view>
						<view class="ite-content">
							<view class="course">
								所属课程：<span>{{item.course_name}}</span>
							</view>
							
							<view class="course" style="margin:36rpx 0;">
								开始时间：<span>{{item.ds_start_time}}</span>
							</view>
							<view class="course">
								截止时间：<span>{{item.ds_end_time}}</span>
							</view>
						</view>
						<view class="chaoshi">
							已超出考试时间
						</view>
					</view>

					<!-- 已完成 --> 
					<view style="height: 362rpx;" @tap.stop="jumpjg(item)" class="overview-ite"
						v-if="type == 3">
						<image class="ztimage" :src='item.is_correct==2?STATIC_URL+"ypy.png":STATIC_URL+"dpy.png"' mode=""></image>
						<text class="zttext">{{item.is_correct==2?'教师已批阅':'待教师批阅'}}</text>
						<view class="ite-tit" style="margin-top: 72rpx;">
							{{item.title}}
						</view>
						<view class="ite-content">
							<!-- <view class="course">
								所属课程：<span>{{item.course_name}}</span>
							</view> -->
							<!-- <view class="course" :class="item.is_correct==2?'py':'wpy'">
								{{item.is_correct==2?'教师已批阅':'待教师批阅'}}
							</view> -->
							<view class="course" style="margin-bottom:36rpx;">
								考试时间：<span>{{item.submission_time}}</span>
							</view>
							<view class="course">
								最终成绩：<span style="color: #145EFD;">{{item.is_correct==2?item.score:'/'}}</span>
							</view>
						</view>
					</view>
				</view>

				<view class="public-page-empty" v-if="list.length == 0 && isup">
					<image src="@/static/global/order.png"></image>
				</view>


			</view>
			<!---flex布局flex布局结束-->
			<!-- 		<view class="flex benben-position-layout flex flex-wrap align-center coursePro_flex_3"
				:style=" {height:(110+bottomSafeAreaRpx)+'rpx',paddingBottom:bottomSafeAreaRpx+'rpx', }">
				<button class='coursePro_fd3_0' @tap.stop="startclassFunc()">练习题库</button>
			</view> -->
			<view :style="{height: (110+bottomSafeAreaRpx)+'rpx'}"></view>
		</view>
	</page-body>
</template>


<script>
	export default {
		data() {
			return {
				list: [],
				name: "",
				aid: "",
				type: 1,
				course:'',//课程id
				isup:false,
			};
		},
		onLoad(options) {
			this.course=options.course
			this.tabChange(1)
			let _this=this
			// 提交考试
			uni.$on('tjks', (data) => {
				_this.tabChange(1)
			});
		},
		mounted() {
			
		},
		onUnload() {
			uni.$off('tjks');
		},
		methods: {
			chaoShi() {
				uni.showToast({
					title: '当前考试已结束，您已不能参与考试！',
					icon: 'none', // 不显示图标
					duration: 1000
				});
			},
			tabChange(val) {
				this.type = val

				// if (val == 1 || val == 2) {
				this.get_exam_list(val)
				// } else {
				// 	this.get_examlog()
				// }
			},
			async get_exam_list(val) {
				this.isup=false
				this.list=[]
				let res = await this.$api.get(global.apiUrls.post684ab8fd334b7, {
					type: val,
					course_id:this.course 
				});
				this.isup=true
				if (res.data.code != 1) {
					this.$message.info(res.data.msg);
					return
				}
				this.list = res.data.data.list
				//未完成的时候过滤掉已考试的，不明白找焦高东
				// if (val == 1) {
				// 	this.list = res.data.data.list.filter((item) => item.is_show == 0)
				// } else {
				// 	this.list = res.data.data.list
				// }

				console.log('llllllllllllll', res.data.data);
			},
			jumpjg(item){
				// uni.navigateTo({
				// 	url:'/pages/exam/examResult/examResult?type=1&examlog_id='+item.aid+'&homeworkreleaserecord_id='+item.aid
				// })
				// return
				// 1is_correct未批改  2已批改
				if(item.is_correct==2){
					uni.navigateTo({
						url:'/pages/exam/examResult/examResult?type=1&examlog_id='+item.aid+'&homeworkreleaserecord_id='+item.aid
					})
				}else{
					this.$message.info('该试题还未批改')
				}
			}

			// async get_examlog(val) {
			// 	let res = await this.$api.get(global.apiUrls.post684ac1bc60e0f, {});

			// 	if (res.data.code != 1) {
			// 		this.$message.info(res.data.msg);
			// 		return
			// 	}
			// 	this.list = res.data.data
			// 	console.log('llllllllllllll', res.data.data);
			// },

		}
	};
</script>

<style lang="scss" scoped>
	.public-page-empty {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		padding: 120upx 0 0 0;

		image {
			width: 300rpx;
			height: 300rpx;
		}
	}

	.tab-outer {
		width: 750rpx;
		height: 90rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		display: flex;
		justify-content: space-around;
		align-items: end;
		font-size: 30rpx;
		color: #707070;

		.tab-ite {
			padding-bottom: 22rpx;
			border-bottom: 4rpx solid rgba(57, 94, 250, 0);
		}

		.tab-ite-active {
			font-weight: 600;
			color: #333333;
			border-bottom: 4rpx solid rgba(57, 94, 250, 1);
		}
	}

	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #F8F8F8;
		background-size: 100% auto;
		background-color: #F3F4F8;

	}

	.overview {
		min-height: 500rpx;
		width: 100%;
		flex: 1;
		overflow-y: auto;
		margin-top: 24rpx;
		overflow-y: auto;

		.overview-ite {
			min-height: 344rpx;
			margin: 0 24rpx 24rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			overflow: hidden;
			position: relative;
			.ztimage{
				position: absolute;
				width: 202rpx;
				height: 72rpx;
				left: 0;
				top:0;
				z-index: 3;
			}
			.zttext{
				position: absolute;
				width: 202rpx;
				height: 72rpx;
				top:5rpx;
				left: 24rpx;
				z-index: 6;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: bold;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 48rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}

			.ite-tit {
				font-weight: 600;
				font-size: 36rpx;
				color: #333333;
				line-height: 50rpx;
				margin: 32rpx 0 0 24rpx;
			}

			.ite-content {
				margin: 24rpx;
				min-height: 158rpx;
				background: #F9FAFC;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				padding: 24rpx ;

				.course {
					font-weight: 400;
					font-size: 26rpx;
					color: #707070;
					line-height: 37rpx;

					span {
						font-weight: 500;
						font-size: 26rpx;
						color: #333333;
					}
				}
				.py{
					color: #0EC655;
				}
				.wpy{
					color: #EE8231;
				}
			}

			.start {
				width: 222rpx;
				height: 68rpx;
				background: #EDF5FF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #145EFD;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 0 auto;
				margin-bottom: 24rpx;
			}

			.chaoshi {
				font-weight: 500;
				font-size: 32rpx;
				color: #7888A2;
				line-height: 45rpx;
				margin-top: 36rpx;
				text-align: center;
			}
		}

	}

	.coursePro_flex_3 {
		width: 750rpx;
		height: 110rpx;
		overflow: hidden;
		z-index: 10;
		bottom: calc(0rpx + var(--window-bottom));
		background-color: #fff;

		.coursePro_fd3_0 {
			background: #145efd;
			width: 450rpx;
			height: 64rpx;
			line-height: 64rpx;
			font-size: 30rpx;
			color: #fff;
			border-radius: 44rpx;
			margin: 0 auto
		}
	}



	.mance_flex_0 {
		background: #fff;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.mance_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 700;
		color: #333333;
		line-height: 50rpx;
	}

	.mance_fd0_0_c0_c0 {
		font-size: 36rpx;
		color: #333;
	}

	.mance_fd0_0_c0 {
		width: 120rpx;
	}

	.mance_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
	}
</style>